<template>
	<view class="content">
		<view class="search-bg">
			<view class="head-bg"></view>
			<view class="head">
				<view class="search-box flex flai" @click="goSearch('')">
					<image src="../../static/img/search.png" mode=""></image>
					<input type="text" value="" disabled placeholder="请输入产品名称" />
				</view>
				<view class="hot">
					<text v-for="(item,index) in info.hotKeyword" :key="index" @click="goSearch(item.keyword)">{{item.keyword}}</text>
				</view>
				<view class="uni-padding-wrap">
					<view class="page-section swiper">
						<view class="page-section-spacing">
							<swiper class="swiper" easing-functio="linear" indicator-active-color="#CEA46C" indicator-color="#888"
							 :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
								<swiper-item v-for="(item,index) in info.banner" :key="index">
									<image :src="item.url" @click="toArticle(item.link,item.name)"></image>
								</swiper-item>

							</swiper>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="public clearfix">
			<image src="../../static/img/icon5.png" mode="" class="fl"></image>
			<view class="public-slide fl">
				<swiper class="swiper" easing-functio="linear" :autoplay="autoplay" interval="4000" duration="1500">
					<swiper-item v-for="(item,index) in info.notice" :key="index">
						<text @click="toArticle(item.url,item.title)">{{item.title}}</text>
					</swiper-item>

				</swiper>
			</view>
		</view>
		<view class="hot-merchant">
			<view class="title flex flai">
				<image src="../../static/img/icon3.png" mode=""></image>
				<text>热门商家</text>
				<navigator url="/pages/moreMechart/index" hover-class="other-navigator-hover" class="flex flai more">
					<text>更多</text>
					<image src="../../static/img/arrow-right.png" mode=""></image>
				</navigator>
			</view>
			<view class="hot-merchant-box flex flai">
				<view class="hot-merchant-list" v-for="(item,index) in info.hotMerchant" :key="index" @click="toDetail(item.id)">
					<image :src="item.picUrl" mode=""></image>
					<view class="merchant-title">{{item.name}}</view>
					<view class="merchant-small-title line-clamp-one">{{item.storeLocation}}</view>
				</view>
			</view>
		</view>
		<view class="distance"></view>
		<view class="hot-merchant">
			<view class="title flex flai">
				<image src="../../static/img/icon1.png" mode=""></image>
				<text>美妆市场</text>
			</view>
			<view class="agora">
				<text v-for="(item,index) in info.market" :key="index" @click="toMerchart(item.name)">{{item.name}}</text>
			</view>
		</view>
		<view class="distance"></view>
		<view class="hot-merchant">
			<view class="title flex flai">
				<image src="../../static/img/icon2.png" mode=""></image>
				<text>旗舰商家</text>
			</view>
			<view class="hot-merchant-box flex flai">
				<view class="hot-merchant-list" v-for="(item,index) in info.recommendMerchant" :key="index" @click="toDetail(item.id)">
					<image :src="item.picUrl" mode=""></image>
					<view class="merchant-title">{{item.name}}</view>
					<view class="merchant-small-title line-clamp-one">{{item.storeLocation}}</view>
				</view>
			</view>
		</view>
		<view class="recommend-title">推荐跑腿公司</view>
		<view class="recommend-box">
			<view class="recommend-list flex flai" v-for="(item,index) in info.errandCompany" :key="index" @click="toSelectCompany(item)">
				<image :src="item.avatar" mode=""></image>
				<view class="list-intr flex1">
					<view class="compan-name">{{item.name}}</view>
					<view class="intr-con">{{item.desc}}</view>
				</view>
			</view>
		</view>
		<view class="prompt-msg">
			如有需要，请联系微信公众号客服，谢谢。
		</view>
		<adv/>
		<view class="distance"></view>
	</view>
</template>

<script>
	import adv from '../components/adv/adv.vue'
	import API from '../../api/index.js'
	export default {
		components:{
			adv
		},
		data() {
			return {
				info:{},
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
			}
		},
		onLoad() {
			this.getData()
		},
		methods: {
			toArticle(url,name) {
				console.log(name)
				if (url!=='') {
					uni.navigateTo({
						url:'/pages/article/index?url='+ url+'&name='+name
					})
				}
				
			},
			goSearch (name) {
				uni.navigateTo({
					url:'/pages/search/search?keyword='+ name
				})
			},
	
			getData () {
				API.indexHome.getIndex().then(res=>{
					console.log(res)
					if (res.errno==0) {
							this.info = res.data
					}
				
				})
			},
			toMerchart (name) {
				uni.navigateTo({
					url:'/pages/moreMechart/index?name='+ name
				})
			},
			// 去商家详情
			toDetail(id) {
				uni.navigateTo({
					url:"/pages/mechartDetail/mechartDetail?id=" + id
				})
			},
			// 选择跑腿公司
			toSelectCompany(item) {
				uni.navigateTo({
					url:"/pages/runCopmanyDetail/index?id="+item.id
				})
			}
		},
	
	}
</script>

<style>
	@import url("./index.css");
</style>
